<column box-="square" class="widget" pad-="2 1" id="filetree-widget">
    <span style="color: var(--blue)">&#xf07b; ~/projects/my-app</span>
    <ul marker-="open tree">
        <li style="color: var(--blue)">&#xf07b; .git</li>
        <li style="color: var(--blue)">&#xf07b; .github</li>
        <li class="ignored">
            <span style="color: var(--blue)">&#xf07b;</span> ◌ .next
        </li>
        <li class="ignored">
            <span style="color: var(--blue)">&#xf07b;</span> ◌ dist
        </li>
        <li class="ignored">
            <span style="color: var(--blue)">&#xf07b;</span> ◌ node_modules
        </li>
        <li>
            <span style="color: var(--blue)">&#xf07b; app</span>
            <ul marker-="open tree">
                <li>
                    <span style="color: var(--blue)">&#xf07b; components</span>
                    <ul>
                        <li>
                            <span style="color: var(--blue)">&#xf07b; ui</span>
                            <ul>
                                <li>
                                    <span style="color: var(--sapphire)"
                                        >&#xe7ba;</span
                                    > Accordion.tsx
                                </li>
                                <li>
                                    <span style="color: var(--sapphire)"
                                        >&#xe7ba;</span
                                    > Button.tsx
                                </li>
                                <li>
                                    <span style="color: var(--sapphire)"
                                        >&#xe7ba;</span
                                    > Dialog.tsx
                                </li>
                                <li>
                                    <span style="color: var(--sapphire)"
                                        >&#xe7ba;</span
                                    > Popover.tsx
                                </li>
                                <li>
                                    <span style="color: var(--sapphire)"
                                        >&#xe7ba;</span
                                    > Tabs.tsx
                                </li>
                                <li>
                                    <span style="color: var(--sapphire)"
                                        >&#xe7ba;</span
                                    > Tooltip.tsx
                                </li>
                                <li>
                                    <span style="color: var(--sapphire)"
                                        >&#xe7ba;</span
                                    > Button.tsx
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <span style="color: var(--mauve)">&#xe60d;</span> favicon.ico
                </li>
                <li>
                    <span style="color: var(--blue)">&#xe749;</span> globals.css
                </li>
                <li>
                    <span style="color: var(--sapphire)">&#xe7ba;</span> layout.tsx
                </li>
                <li>
                    <span style="color: var(--sapphire)">&#xe7ba;</span> page.tsx
                </li>
            </ul>
        </li>
        <li>
            <span style="color: var(--blue)">&#xf07b; public</span>
            <ul marker-="open tree">
                <li>
                    <span style="color: var(--mauve)">&#xe60d;</span> logo-256x256.png
                </li>
                <li>
                    <span style="color: var(--mauve)">&#xe60d;</span> logo-128x128.png
                </li>
                <li>
                    <span style="color: var(--mauve)">&#xe60d;</span> logo-64x64.png
                </li>
                <li>
                    <span style="color: var(--mauve)">&#xe60d;</span> logo-16x16.png
                </li>
                <li>
                    <span style="color: var(--mauve)">&#xe60d;</span> logo.svg
                </li>
            </ul>
        </li>
        <li>&#xe83e; next.config.ts</li>
        <li>&#xe8ca; tsconfig.json</li>
    </ul>
</column>

<style>
    #filetree-widget {
        grid-column: 1;
        grid-row: 2 / 5;
    }

    ul {
        overflow: hidden;
    }

    ul li::before {
        color: var(--foreground2);
    }

    .ignored {
        color: var(--foreground2);
    }
</style>
